import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './Titlebar.module.css';
import Tooltip from '@kuiper-components/tooltip';
import { Link } from 'react-router-dom';
import CopyBoard from '../../../../components/CopyBoard';
import Icon from '../../icon';
import Nonsupport from '../../../../components/Nonsupport';
import Loading from '@knownsec/react-component/dist/Loading';
import {
	VUL_LEVEL_EN_CN_MAP,
	WARNING_SECURITYEVENT_MAP,
	WARNING_SSL_MAP,
	WARNING_CATEGORY_KEY_LABEL_MAP,
} from '../../../../../common/constants';
const ACTIVE_TEXT = {
	all: { url: '/asset-manage/manage/web' },
	vul: { text: '个漏洞', url: '/job-manage/web-task' },
	ssl: { text: '个威胁', url: '/job-manage/web-task' },
	securityEvent: {
		text: '个事件',
		url: '/job-manage/web-task',
	},
	content: { text: '个威胁', url: '/job-manage/web-task' },
	changeCheck: { text: '个篡改', url: '/job-manage/web-task' },
	hostVul: { url: '/asset-manage/manage/host' },
};
export default function TitleBar({ className, active, jobsInfo, loading }) {
	function risksScore(score) {
		if (score < 80) {
			return '风险严重';
		} else if (score < 95) {
			return '风险较高';
		} else {
			return '风险较低';
		}
	}
	function changeWidth({ jobsInfo, info, active }) {
		let num = 0;
		if (active === 'all' || active === 'hostVul') {
			num =
				info.data.score > 0
					? (info.data.score / jobsInfo[0].data.score).toFixed(2) * 100 > 100
						? 100
						: (info.data.count / jobsInfo[0].data.count).toFixed(2) * 100
					: 0.5;
		} else {
			num =
				info.data.count > 0
					? (info.data.count / jobsInfo[0].data.count).toFixed(2) * 100 > 100
						? 100
						: (info.data.count / jobsInfo[0].data.count).toFixed(2) * 100
					: 0.5;
		}
		return num;
	}
	function overlay(data, active) {
		const obj = {
			vul: { name: VUL_LEVEL_EN_CN_MAP, text: '待处理漏洞' },
			securityEvent: { name: WARNING_SECURITYEVENT_MAP, text: '待处理事件' },
			ssl: { name: WARNING_SSL_MAP, text: '待处理威胁' },
			content: {
				name: WARNING_CATEGORY_KEY_LABEL_MAP.content,
				text: '待处理威胁',
			},
			changeCheck: {
				name: WARNING_CATEGORY_KEY_LABEL_MAP.changeCheck,
				text: '待处理篡改',
			},
		};
		const data_ = Object.assign({}, data);
		delete data_.score;
		const tipValueMap = {};
		console.log(data_)
		let keys = Object.keys(data_);
		if (active === 'vul') {
			keys = ['critical', 'high', 'medium', 'low'];
		} else if (active === 'securityEvent') {
			keys = [
				'black_links',
				'cryjack',
				'malscan',
				'broken_links',
				'foreign_links',
			];
		}
		keys.map(key => {
			tipValueMap[key] = data_[key];
		});
		return (
			<div>
				<table className={s.table}>
					<tr>
						{Object.keys(tipValueMap)
							.reduce((t, e, i) => {
								if (obj[active].name[e]) {
									t.push(<td key={i}>{obj[active].name[e]}</td>);
								}
								return t;
							}, [])
							.map(item => {
								return item;
							})}
					</tr>
					<tr>
						{Object.keys(tipValueMap)
							.reduce((t, e, i) => {
								if (obj[active].name[e]) {
									t.push(
										<td key={i} className={s.count}>
											{tipValueMap[e]}
										</td>
									);
								}
								return t;
							}, [])
							.map(item => {
								return item;
							})}
					</tr>
				</table>
			</div>
		);
	}
	const scoreDemo = (active, info) => {
		let text = '';
		const score = info.data.score;
		if (active === 'all') {
			if (score < 80) {
				text = '风险严重';
			} else if (score < 95) {
				text = '风险较高';
			} else {
				text = '风险较低';
			}
			return (
				<div className={s.barLink}>
					<div className={s.barNum}>{info?.data?.level}</div>
					<Link to={`/dashboard/center/${info.job_id}/weakness`}>查看报表</Link>
				</div>
			);
		} else {
			const score_ = 100 - score;
			if (score_ > 75) {
				text = '风险严重';
			} else if (score_ > 25) {
				text = '风险较高';
			} else {
				text = '风险较低';
			}
			return (
				<div className={s.barLink}>
					<div className={s.barNum}>{info?.data?.level}</div>
					<Link
						to={{
							pathname: `/job-manage/host-task/detail/`,
							search: `jid=${info.job_id}id=${info.task.asset_task_id}&tid=${info.task.task_id}&type=${info.task.trigger_type}`,
						}}
					>
						查看报表
					</Link>
				</div>
			);
		}
	};

	const linkUrl = (url, target, note) => {
		const obj = {};
		target && (obj.target_url = target);
		note && (obj.note = note);
		return `${url}?filter=${encodeURIComponent(JSON.stringify(obj))}`;
	};
	function element({ jobsInfo, active, info }) {
		const score = info.data.score;

		if (active === 'all' || active === 'hostVul') {
			return (
				<div className={s.barBox}>
					<div className={s.title}>
						<Link to={linkUrl(ACTIVE_TEXT[active].url, info.target, info.note)}>
							<span title={info.note}>{info.note}</span>
						</Link>
						<CopyBoard text={info.target} maxWidth="15vw" />
					</div>
					<div className={s.barType}>
						<div className={s.barAll}>
							<Tooltip
								overlay={`风险评分：${score}分`}
								placement={
									changeWidth({ jobsInfo, info, active }) > 10
										? 'topRight'
										: 'top'
								}
							>
								<div
									className={s.barAll2}
									// eslint-disable-next-line prettier/prettier
									style={{
										width: `${info.data.score === 0 ? 0.5 : info.data.score}%`,
									}}
								></div>
							</Tooltip>
						</div>
					</div>
					{scoreDemo(active, info)}
				</div>
			);
		} else {
			let linkUrlMore = '';
			if (active === 'securityEvent') {
				linkUrlMore = `/dashboard/center/${info.job_id}/securityEvent`;
			} else if (active === 'content') {
				linkUrlMore = `/dashboard/center/${info.job_id}/content`;
			} else if (active === 'ssl') {
				linkUrlMore = `/dashboard/center/${info.job_id}/ssl`;
			} else if (active === 'changeCheck') {
				linkUrlMore = `/dashboard/center/${info.job_id}/changeCheck`;
			} else {
				linkUrlMore = `/dashboard/center/${info.job_id}/weakness`;
			}
			return (
				<div className={s.barBox}>
					<div className={s.title}>
						<Link to={linkUrl(ACTIVE_TEXT[active].url, info.target)}>
							<span title={info.note}>{info.note}</span>
						</Link>
						<CopyBoard text={info.target} maxWidth="17vw" />
					</div>
					<div className={s.barType}>
						<div className={s.barAll}>
							<Tooltip
								overlay={overlay(info.data, active)}
								placement={
									changeWidth({ jobsInfo, info, active }) > 10
										? 'topRight'
										: 'top'
								}
							>
								<div
									className={s.barAll2}
									style={{
										width: `${changeWidth({ jobsInfo, info, active })}%`,
									}}
								></div>
							</Tooltip>
						</div>
					</div>
					<div className={s.barLink}>
						<div className={s.barVulT}>
							{info.data.count || 0}
							{ACTIVE_TEXT[active].text}
						</div>
						<Link to={linkUrlMore}>查看报表</Link>
					</div>
				</div>
			);
		}
	}
	function isE(jobsInfo, active) {
		if (loading) {
			return <Loading show={true} label="" />;
		}
		const feature = JSON.parse(sessionStorage.resD).feature;
		const keyArr = [];
		Object.entries(feature).forEach(([key, bool]) => {
			if (key.includes(active) && bool) {
				keyArr.push(active);
			}
		});
		if (!keyArr.length && active !== 'all' && active === 'Todo') {
			return <Nonsupport className={s.nonsupport}></Nonsupport>;
		} else {
			if (jobsInfo.length) {
				return (
					<div>
						<div className={s.more}>
							<Link to={ACTIVE_TEXT[active].url}>更多&gt;</Link>
						</div>
						{jobsInfo.map((info, i) => {
							return element({ jobsInfo, active, info, i });
						})}
					</div>
				);
			} else {
				return (
					<div className={s.empty}>
						<Icon active="empty"></Icon>
						<span>暂无数据</span>
					</div>
				);
			}
		}
	}
	return (
		<div className={cn(className, s.titleBar)}>{isE(jobsInfo, active)}</div>
	);
}

TitleBar.propTypes = {
	className: PropTypes.string,
	active: PropTypes.string,
	jobsInfo: PropTypes.any,
	loading: PropTypes.any,
};

TitleBar.defaultProps = {
	className: s.titleBar,
	jobsInfo: [],
};
